{% extends "eventos/base.html" %}

{% block extrahead %}
    {% load static %}
    {% get_static_prefix as STATIC_PREFIX %}
    
    <style type="text/css">
        
        #arriba  { width: 100%; float: left; height:20px}
        #leftcolumn  { width: 20%; float: left; height:30px}
        #rightcolumn { width: 80%; float: right; height:30px}
        #leftcolumn1  { width: 15%; float: left; height:20px}
        #rightcolumn1 { width: 85%; float: right; height:20px}
        #main { width: 40%; float: left}
        #errores {width: 60%; float: left}
    </style>
    
    <!-- /jquery/datepicker-->
    <link rel="stylesheet" href="{{ STATIC_PREFIX }}css/jquery/ui/jquery.ui.all.css">
    <link rel="stylesheet" href="{{ STATIC_PREFIX }}css/jquery/ui/jquery.ui.demos.css">
    <!-- ................. -->
    <!--   checkboxtree    -->
    <link rel="stylesheet" type="text/css" href="{{ STATIC_PREFIX }}css/jquery/ui/jquery-ui-1.8.16.custom.css"/>
    <link rel="stylesheet" type="text/css" href="{{ STATIC_PREFIX }}css/jquery/checkboxtree/jquery.checkboxtree.css"/>
    <!-- ................. -->
        
    <!-- /jquery/checkboxtree -->
    <script type="text/javascript" src="{{ STATIC_PREFIX }}js/jquery/jquery-1.7.min.js"></script>
    <script type="text/javascript" src="{{ STATIC_PREFIX }}js/jquery/ui/jquery-ui-1.8.12.custom.min.js"></script>
    <script type="text/javascript" src="{{ STATIC_PREFIX }}js/jquery/checkboxtree/jquery.checkboxtree.js"></script>
    <!-- ................. -->
    
    <script type="text/javascript">
        $(document).ready(function() {
            $('#tree').checkboxTree({
                onCheck: {
                    node: 'expand'
                },
                onUncheck: {
                    node: 'collapse'
                },
                initializeChecked: 'expanded',
                initializeUnchecked: 'collapsed',
                collapseDuration: 150,
                expandDuration: 150
            });
            {% for deporte in lista %}{% for disciplina in deporte.disciplinas %}{% for categoria in disciplina.categorias %}
            {% ifequal categoria.checked 'yes' %}
            $('#tree').checkboxTree('check', $('#{{categoria.id}}'));
            {% endifequal %}
            {% endfor %}{% endfor %}{% endfor %}
        });
    </script>
    
    <!-- /jquery/datepicker-->
    <!--script type="text/javascript" src="{{ STATIC_PREFIX }}js/jquery/jquery-1.7.min.js"></script-->
    <script type="text/javascript" src="{{ STATIC_PREFIX }}js/jquery/ui/jquery.ui.core.js"></script>
    <script type="text/javascript" src="{{ STATIC_PREFIX }}js/jquery/ui/jquery.ui.datepicker.js"></script>
    <script type="text/javascript" src="{{ STATIC_PREFIX }}js/jquery/ui/jquery.ui.datepicker-es.js"></script>
    <!-- ................. -->
    
    <script>
    $(function() {
        var dates = $( "#id_fecha_inicio, #id_fecha_fin" ).datepicker({
            defaultDate: "+1w",
            buttonImage: "{{STATIC_PREFIX}}css/jquery/ui/images/calendar.gif",
            showOn: "button",
            //changeMonth: true,
            numberOfMonths: 1,
            onSelect: function( selectedDate ) {
                var option = this.id == "id_fecha_inicio" ? "minDate" : "maxDate",
                    instance = $( this ).data( "datepicker" ),
                    date = $.datepicker.parseDate(
                        instance.settings.dateFormat ||
                        $.datepicker._defaults.dateFormat,
                        selectedDate, instance.settings );
                dates.not( this ).datepicker( "option", option, date );
            }
        });
    });
    </script>
{% endblock %}

{% block breadcrumb %}<a href="/">Inicio</a> > <a href="/eventos/">Eventos</a> > {% if not evento %}Crear evento{% else %} Editar evento {% endif %} {% endblock %}

{% block content %}
<form action="" method="post">{% csrf_token %}
<table width='100%'> <tr>
    <td>
        <div>
            <!--<div align="right" id="arriba"></div>-->
            <div>
                <div>
                <div id = "leftcolumn1">
                </div>
                <div id="rightcolumn1">
                    {{form.nombre.errors}}
                </div>
                </div>
                
                <div>
                <div align="right" id="leftcolumn"><label for="id_activo">Nombre*: </label></div>
                <div align="left" id="rightcolumn">{{form.nombre}}</div>
                </div>
            </div>
            
            <div>
                <div>
                <div id = "leftcolumn1">
                </div>
                <div id="rightcolumn1">
                    {{form.edicion.errors}}
                </div>
                </div>
                <div>
                <div align="right" id="leftcolumn"><label for="id_activo">Edici&oacute;n: </label></div>
                <div align="left" id="rightcolumn">{{form.edicion}}</div>
                </div>
            </div>
            
            <div>
                <div>
                <div id = "leftcolumn1">
                </div>
                <div id="rightcolumn1">
                    {{form.fecha_inicio.errors}}
                </div>
                </div>
                
                <div>
                <div align="right" id="leftcolumn"><label for="id_activo">Fecha inicio*: </label></div>
                <div align="left" id="rightcolumn">{{form.fecha_inicio}}</div>
                </div>
            </div>
            
            <div>
                <div>
                <div id = "leftcolumn1">
                </div>
                <div id="rightcolumn1">
                    {{form.fecha_fin.errors}}
                </div>
                </div>
                <div>
                <div align="right" id="leftcolumn"><label for="id_activo">Fecha fin*: </label></div>
                <div align="left" id="rightcolumn">{{form.fecha_fin}}</div>
                </div>
            </div>
            
            <div align="right" id="leftcolumn">
                <label for="id_deportes">Deportes:</label>
            </div>
            
            <div id="main">
                <ul id="tree">
                    {% for deporte in lista %}
                    <li id="{{deporte.id}}"><input type="checkbox" name="{{deporte.id}}"><label>{{deporte.nombre}}</label>
                        {% for disciplina in deporte.disciplinas %}
                        <ul>
                            <li id="{{disciplina.id}}"><input type="checkbox" name="{{disciplina.id}}"><label>{{disciplina.nombre}}</label>
                            {% for categoria in disciplina.categorias %}
                            <ul><li id="{{categoria.id}}"><input type="checkbox" name="{{categoria.id}}"><label>{{categoria.nombre_completo}}</label></ul>
                            {% endfor %}
                        </ul>
                        {% endfor %}
                    {% endfor %}
                </ul>
            </div>
        </div>
    </td>
</tr>
</table>
{% if evento %}
        <label>Nota: Al editar el evento se borrarán todas las inscripciones y resultados del evento.</label>
        {% endif %}
<div id='buttons' align='right'>
<input type="submit" class='savebuton'   value="Guardar"                      name='boton_guardar'/>
<input type="submit" class='savebuton'   value="Guardar e ingresar otro"       name='boton_guardar_y_otro'/>
<input type="submit" class='savebuton'   value="Guardar y continuar editando" name='boton_guardar_y_editar'/>
<input type="submit" class='cancelbuton' value="Cancelar"                     name='boton_cancelar'/>
</div>
</form>
{% endblock %}
